<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Openintel Datavisual</title>
  <link rel="stylesheet" href="https://meyerweb.com/eric/tools/css/reset/reset.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/pie.css">
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
  <script type="text/javascript" src="js/testdata.json"></script>
  <script src="https://d3js.org/d3.v5.js"></script>
</head>

<body>
  <nav>
  </nav>

  <section>
    <h1>Groei van de top level domeinen inverhouding tot de landelijken</h1>
    <button type="button" id="global" name="button">Split internationaal</button>
    <button type="button" id="combine" name="button">Combineer</button>

    <div id=bubble>
    </div>
  </section>
  <section>
    <h1>Waar worden de (.nl) domeinen geregistreerd</h1>
    <section class="sectionHolderData">

      <article class="summary">
        <div class="summaryText">
        <h2>Uitleg</h2>
        <p>Hier naast ziet u de verdeleing van een top lvl domein.</p>
        <p>De TDLs zijn hier onderverdeelt door de herkomst van de organisatie.Zo kan je de invloed zien van anderen landen.</p>
        <p>Ook kun je zo de populariteit aflezen van bepaalden hostings TDL's</p>
        <br>
        <p>
          De Nummers zijn het aantal geregistreerden top level domains
        </p>

        <p>
Door op de play button te clicken wordt het door de loop van jaren afgespeeld
        </p>
</div>

      </article>


      <div class="countryHolder">
        <div class="progressHolder">
          <div class="progressBarHolder">
            <div class="play"></div>
            <div class="progressBar">
              <span class="progress">
                <p>2015</p>
              </span>
              <img src="img/time.png" alt="">
            </div>
          </div>
        </div>

        <div class="selectedCountry">
          <div id="chart">
          </div>
        </div>

        <!-- <div class="otherCountries">
          <div class="listCountry">
            <img src="img/testchart.png" alt="">
          </div>


          <div class="listCountry">
            <img src="img/testchart.png" alt="">

          </div>


          <div class="listCountry">
            <img src="img/testchart.png" alt="">
          </div>
        </div>
      </div> -->

      </div>



    </section>

  </section>

  <footer></footer>

  <script src="js/martijn.js"></script>
</body>

</html>
